<!--
 * @Description: 自定义指令
 * @Author: zhanyinjia
 * @Date: 2022-07-04 11:02:18
 * @LastEditors: zhanyinjia
 * @LastEditTime: 2022-09-28 15:35:01
-->
<template>
  <div>
    <h4>v-throttle</h4>
    <el-button type="primary" v-throttle="[search1, 1000]">节流</el-button>

    <h4>v-debounce</h4>
    <el-button type="primary" v-debounce="search2">防抖</el-button>

    <h4>v-click-outside</h4>
    <div class="wrapper" v-click-outside="hide" v-border="'red'">
      <input type="text" @focus="isShow = true" />
      <div class="content" v-if="isShow">
        <p>内容内容内容内容内容内容</p>
        <p>内容内容内容内容内容内容</p>
        <p>内容内容内容内容内容内容</p>
        <el-button type="primary">点击</el-button>
        <p>内容内容内容内容内容内容</p>
        <p>内容内容内容内容内容内容</p>
        <p>内容内容内容内容内容内容</p>
      </div>
    </div>

    <h4>v-focus</h4>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      isShow: false
    }
  },
  methods: {
    search1() {
      console.log('节流查询，1s执行一次')
    },
    search2() {
      console.log('防抖查询')
    },
    hide() {
      this.isShow = false
    }
  }
}
</script>

<style lang="less" scoped>
h4 {
  margin-top: 40px;
}
.wrapper {
  width: 400px;
}
</style>